<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品设计思维分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#8b5cf6',
                        neutral: '#64748b',
                        light: '#f1f5f9',
                        dark: '#1e293b'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10 top-0">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="/" class="flex-shrink-0 flex items-center">
                        <i class="fa fa-lightbulb-o text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-gray-800">产品设计思维分析系统</span>
                    </a>
                </div>
                <div class="flex items-center">
                    <a href="/history" class="p-2 rounded-md text-gray-600 hover:text-primary hover:bg-blue-50 transition-custom">
                        <i class="fa fa-history mr-1"></i> 历史记录
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
        <div class="text-center mb-12">
            <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-gray-900 mb-4 text-shadow">
                剖析优秀产品的设计思维
            </h1>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                上传产品操作视频，系统将自动分析其设计思路、具体设计内容和可复用的设计策略，
                帮助产品经理快速学习和借鉴优秀产品的设计经验。
            </p>
        </div>

        <!-- 视频上传区域 -->
        <div class="max-w-3xl mx-auto">
            <div class="bg-white rounded-xl shadow-lg p-8 mb-8 transform transition-custom hover:shadow-xl">
                <div id="upload-container" class="text-center">
                    <div id="drop-area" class="border-2 border-dashed border-gray-300 rounded-lg p-10 cursor-pointer transition-custom hover:border-primary hover:bg-blue-50 mb-6">
                        <i class="fa fa-film text-5xl text-gray-400 mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-700 mb-2">拖放视频文件到此处</h3>
                        <p class="text-sm text-gray-500 mb-4">或点击选择文件</p>
                        <label class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-custom">
                            <i class="fa fa-upload mr-2"></i>选择视频文件
                            <input type="file" id="video-upload" accept="video/mp4,video/mov,video/avi" class="hidden">
                        </label>
                        <p class="text-xs text-gray-500 mt-4">支持 MP4、MOV、AVI 格式，建议时长 30 秒以内</p>
                    </div>
                    
                    <div id="file-info" class="hidden mb-6">
                        <div class="flex items-center justify-between bg-gray-50 p-4 rounded-lg">
                            <div class="flex items-center">
                                <i class="fa fa-file-video-o text-primary mr-3"></i>
                                <span id="file-name" class="text-gray-700 truncate max-w-md"></span>
                            </div>
                            <button id="remove-file" class="text-gray-500 hover:text-red-500 transition-custom">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    
                    <button id="start-analysis" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 transition-custom disabled:opacity-50 disabled:cursor-not-allowed hidden">
                        <i class="fa fa-search mr-2"></i>开始分析设计思维
                    </button>
                </div>
                
                <!-- 分析进度区域 -->
                <div id="progress-container" class="hidden">
                    <div class="text-center mb-4">
                        <h3 class="text-lg font-medium text-gray-700">正在分析视频内容...</h3>
                        <p class="text-sm text-gray-500" id="progress-message">提取视频帧并进行设计思维分析</p>
                    </div>
                    
                    <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
                        <div id="progress-bar" class="bg-primary h-2.5 rounded-full w-0 transition-all duration-300"></div>
                    </div>
                    
                    <div class="text-center">
                        <p class="text-sm text-gray-500" id="analysis-id-display">分析ID: <span id="analysis-id"></span></p>
                        <a id="results-link" href="#" class="text-primary hover:underline mt-2 inline-block hidden">查看分析结果</a>
                    </div>
                </div>
            </div>
            
            <!-- 系统功能介绍 -->
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="bg-white rounded-xl shadow p-6 transition-custom hover:shadow-md">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-sitemap text-primary text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">设计思维框架</h3>
                    <p class="text-gray-600 text-sm">剖析产品定位、目标用户分层和问题拆解逻辑，理解产品团队的思考方式。</p>
                </div>
                
                <div class="bg-white rounded-xl shadow p-6 transition-custom hover:shadow-md">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-cubes text-secondary text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">具体设计内容</h3>
                    <p class="text-gray-600 text-sm">解析功能模块结构、交互流程和视觉规范，掌握产品的具体设计实现。</p>
                </div>
                
                <div class="bg-white rounded-xl shadow p-6 transition-custom hover:shadow-md">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-lightbulb-o text-accent text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">可复用策略</h3>
                    <p class="text-gray-600 text-sm">提取组件复用、配置逻辑和生态扩展等可复用的设计策略，直接应用到自己的产品中。</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <p class="text-gray-400">© 2023 产品设计思维分析系统 | 助力产品经理快速成长</p>
            </div>
        </div>
    </footer>

    <script>
        // 上传相关元素
        const dropArea = document.getElementById('drop-area');
        const videoUpload = document.getElementById('video-upload');
        const fileInfo = document.getElementById('file-info');
        const fileName = document.getElementById('file-name');
        const removeFile = document.getElementById('remove-file');
        const startAnalysis = document.getElementById('start-analysis');
        const uploadContainer = document.getElementById('upload-container');
        const progressContainer = document.getElementById('progress-container');
        const progressBar = document.getElementById('progress-bar');
        const progressMessage = document.getElementById('progress-message');
        const analysisId = document.getElementById('analysis-id');
        const analysisIdDisplay = document.getElementById('analysis-id-display');
        const resultsLink = document.getElementById('results-link');
        
        // 拖放功能
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropArea.classList.add('border-primary');
            dropArea.classList.add('bg-blue-50');
        }
        
        function unhighlight() {
            dropArea.classList.remove('border-primary');
            dropArea.classList.remove('bg-blue-50');
        }
        
        dropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const file = dt.files[0];
            
            if (file) {
                handleFiles(file);
            }
        }
        
        // 文件选择
        videoUpload.addEventListener('change', function() {
            if (this.files.length > 0) {
                handleFiles(this.files[0]);
            }
        });
        
        dropArea.addEventListener('click', function() {
            videoUpload.click();
        });
        
        // 处理文件
        function handleFiles(file) {
            // 检查文件类型
            if (!file.type.startsWith('video/')) {
                alert('请上传视频文件');
                return;
            }
            
            // 检查文件大小（限制100MB）
            if (file.size > 100 * 1024 * 1024) {
                alert('视频文件大小不能超过100MB');
                return;
            }
            
            // 显示文件信息
            fileName.textContent = file.name;
            fileInfo.classList.remove('hidden');
            startAnalysis.classList.remove('hidden');
        }
        
        // 移除文件
        removeFile.addEventListener('click', function() {
            videoUpload.value = '';
            fileInfo.classList.add('hidden');
            startAnalysis.classList.add('hidden');
        });
        
        // 开始分析
        startAnalysis.addEventListener('click', function() {
            const file = videoUpload.files[0];
            if (!file) {
                alert('请选择视频文件');
                return;
            }
            
            // 创建FormData
            const formData = new FormData();
            formData.append('video', file);
            
            // 显示进度区域
            uploadContainer.classList.add('hidden');
            progressContainer.classList.remove('hidden');
            progressBar.style.width = '0%';
            progressMessage.textContent = '正在上传视频...';
            
            // 上传视频并开始分析
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('上传失败');
                }
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }
                
                // 显示分析ID
                analysisId.textContent = data.analysis_id;
                analysisIdDisplay.classList.remove('hidden');
                
                // 开始检查分析状态
                checkAnalysisStatus(data.analysis_id);
            })
            .catch(error => {
                alert('分析启动失败: ' + error.message);
                uploadContainer.classList.remove('hidden');
                progressContainer.classList.add('hidden');
            });
        });
        
        // 检查分析状态
        function checkAnalysisStatus(analysisId) {
            const checkInterval = setInterval(() => {
                fetch(`/check_status/${analysisId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取状态失败');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        throw new Error(data.error);
                    }
                    
                    // 更新进度
                    switch (data.status) {
                        case 'pending':
                            progressBar.style.width = '20%';
                            progressMessage.textContent = '等待分析开始...';
                            break;
                        case 'processing':
                            progressBar.style.width = '50%';
                            progressMessage.textContent = '正在分析设计思维...';
                            break;
                        case 'completed':
                            clearInterval(checkInterval);
                            progressBar.style.width = '100%';
                            progressMessage.textContent = '分析完成！';
                            resultsLink.href = `/analysis/${analysisId}`;
                            resultsLink.classList.remove('hidden');
                            
                            // 自动跳转
                            setTimeout(() => {
                                window.location.href = `/analysis/${analysisId}`;
                            }, 1500);
                            break;
                        case 'failed':
                            clearInterval(checkInterval);
                            progressBar.style.width = '100%';
                            progressBar.classList.remove('bg-primary');
                            progressBar.classList.add('bg-red-500');
                            progressMessage.textContent = '分析失败，请重试';
                            break;
                    }
                })
                .catch(error => {
                    clearInterval(checkInterval);
                    alert('获取分析状态失败: ' + error.message);
                    uploadContainer.classList.remove('hidden');
                    progressContainer.classList.add('hidden');
                });
            }, 3000);
        }
    </script>
</body>
</html>
    